【Day32】從零開始的程式大亂鬥：CSS－Selector

2023 iThome 鐵人賽

自我挑戰組

那些有趣的程式系列第 32 篇

15th鐵人賽

dcheng0915

2023-10-21 23:40:40

527 瀏覽

分享至

今天要談的則之前沒說到，但很重要的CSS選擇器－CSS Selector。

Selector 用來做什麼？

其實就和它的名字一樣，是用來選取元素的。

像是【Day31】從零開始的程式大亂鬥：CSS－Style 的完整範例：

<!DOCTYPE html>
<html>
    <head>
        <title>CSS－Style</title>
        <style>
            .paper1 {
                background-color: black;
            }
            .paper2 {
                background-color: lightgray;
            }
            .paper2-1 {
                background-color: lightblue;
                width: 80%;
            }
            .paper2-2 {
                background-color: lightpink;
                width: 60%;
            }
        </style>
    </head>
    <body>
        <div class="paper1">1</div>
        <div class="paper2">
            <div class="paper2-1">2</div>
            <div class="paper2-2">3</div>
        </div>
    </body>
</html>

在這個範例中，幾乎都是以 class 去選取網頁內容中的元素，但除了 class 以外，還有其他方式，像是：

元素選擇器（Element Selector）
類別選擇器（Class Selector）
ID選擇器（ID Selector）
通用選擇器（Universal Selector）
後代選擇器（Descendant Selector）
相鄰兄弟選擇器（Adjacent Sibling Selector）
子元素選擇器（Child Selector）
屬性選擇器（Attribute Selector）
偽類選擇器（Pseudo-Class Selector）

如此多的選擇器，如果是新手肯定會有疑問，我該用哪一個去選取元素？這個答案並不固定，每個人有每個人選取的方式，只要能夠選取到你要的元素，那基本上就達成了使用選取器的目標。

Example：

回到剛剛的範例，除了只使用 class 選取元素外，我們還能改寫成：

<style>
    div.paper1 {
        background-color: black;
    }
    div.paper2 {
        background-color: lightgray;
    }
    div.paper2-1 {
        background-color: lightblue;
        width: 80%;
    }
    div.paper2-2 {
        background-color: lightpink;
        width: 60%;
    }
</style>

加上 元素選擇器（div） 。

<style>
    div.paper1 {
        background-color: black;
    }
    div.paper2 {
        background-color: lightgray;
    }
    div.paper2 div.paper2-1 {
        background-color: lightblue;
        width: 80%;
    }
    div.paper2 div.paper2-2 {
        background-color: lightpink;
        width: 60%;
    }
</style>

使用 後代選擇器（空格） 。

<style>
    div.paper1 {
        background-color: black;
    }
    div.paper2 {
        background-color: lightgray;
    }
    div.paper2 > div.paper2-1 {
        background-color: lightblue;
        width: 80%;
    }
    div.paper2 > div.paper2-2 {
        background-color: lightpink;
        width: 60%;
    }
</style>

使用 子元素選擇器（>） 。

從範例中可以看出，不論使用何種方式去選擇元素，最後輸出的網頁內容都是相同的。因此不必太過在意使用什麼樣類型的選擇器，只要能達成選取元素的選擇器，就是好選擇器！